<template>
  <div class="TagManage">
    <!--t添加删除按钮-->
    <div  class="buttonGroup">
      <span>请输入学生ID：</span>
      <Input type="text"  v-model="inptext" class="search_input" @keyup.enter.native.stop.prevent="SearchTag"></Input><Button type="primary" class="searchBtnColor"  @click = "SearchTag()" >搜索</button>
    </div>
    <!--标签列表-->
    <div  class="TagManagList">
      <Table border :columns="columnsStudent" :data="dataStudent"></Table>
    </div>
    <CheckboxGroup v-model="fruit" v-show="tagShow" @on-change="sendMakeTag">
      <Checkbox  v-for="item in TagManagList"  :label="item.title"  ></Checkbox>
    </CheckboxGroup>
  </div>
</template>
<script>
  import tagChid from "service/tagGroup.js";
  export default {

    data() {
      return {
        inptext:'',
        columnsStudent: [
          {
            title: '学生',
            key: 'studentId',
          },
          {
            title: '中文名',
            key: 'stuName',
          },
          {
            title: '英文名',
            key: 'stuEnName',
          },
        ],
        dataStudent: [],
        fruit: [],
        TagManagList:[],
        tagShow:false
      }
    },
    methods: {
      //设置学生标签
      sendMakeTag(data){
        let id = this.dataStudent[0].studentId;
        let _this = this
        var arr = [];
        for(let i=0;i<data.length;i++){
            for(let j=0;j<_this.TagManagList.length;j++){
              if(data[i] == _this.TagManagList[j].title){
                arr[i]= _this.TagManagList[j].id
              }
            }
        }
//        console.log(arr)
        this.ChangeStudentTag(id,arr)
      },

      SearchTag(){
        if( this.inptext){
          this.TagManagList=[];
          this.dataStudent=[];

          this.searchChild( this.inptext);
          this.tagShow=true;

        }else{
          this.$Message.info('请输入学生')
        }
      },
      //获取学生信息
      async searchChild( id) {
        let jsondata = await tagChid.searchChild({
          'stuId':id,
        })
        if (!jsondata) {
          this.$Message.info('获取信息失败')
        }
        this.dataStudent.push(jsondata.data);
        for (let i=0;i<jsondata.data.tag.length;i++){
          this.fruit[i]=jsondata.data.tag[i].name
        };
        this.getAddTag();
      },
      //获取所有标签
      async getAddTag() {
        let _this=this;
        let jsondata = await tagChid.getAddTag()
        if (!jsondata) {}
        for (let i = 0; i < jsondata.data.length; i++) {
          _this.TagManagList.push({
            id: jsondata.data[i].id,
            title: jsondata.data[i].name
          })
        }
      },
      //修改学生标签
      async ChangeStudentTag(id ,arr){
        let jsondata = await tagChid.ChangeStudentTag({
          "stuId": id,
          "tagIds": arr
        })
        if (!jsondata) {
          this.$Message.info('设置失败请重新勾选')
        }else{
          this.$Message.info('设置成功')
        }
      }
    },
    mounted: function() {


    }
  };
</script>
<style scoped>
  .TagManage{
    width: 100%;
  }
  .buttonGroup{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #80848f;
    text-align: left;
  }
  .search_input{
    width:250px;
    margin-right: 10px;
  }
</style>
